import React from "react";
import "../css/main.less"
import  Header from "./include/header"
import Bottom from "./include/bottom"
import {Space, Swiper} from "antd-mobile"
import { Image, List } from 'antd-mobile'
import {
    ScanningOutline,
    SystemQRcodeOutline,
    UserContactOutline,
    BankcardOutline
} from 'antd-mobile-icons'
/**
 * 首页
 */
class App extends React.Component{
    //构造函数 只能有一个，只能有一个state
    constructor(props) {
        super(props);
        this.state={
        }
    }
    users = [
        {
            name: '巴将军·非遗原味火锅',
            description: '王府井  牛排',},
        {
            name: "M·aunt轻食主义",
            description: '南充汽车站  轻食沙拉',},
        {
            name: '叶婆婆钵钵鸡',
            description: '好吃不贵  四川人最爱',},
        {
            name: '小龙虾',
            description: '大尚龙虾、烧烤、虾尾、海鲜',},
        ]
    colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
    items = this.colors.map((color, index) => (
        <Swiper.Item key={index}>
            <img className={"food"} src={require("../图片/"+ (index+1)+".jpg").default} alt={""} style={{ borderRadius: 5 }}/>
        </Swiper.Item>
    ))

    render() {
        return (
            <div className={"mainApp"}>
                <Header/>
                <div className={'middle'}>
                    <div className={"other"}>
                        <div className={"icon"}>
                            <Space wrap className={'A'}>
                                <ScanningOutline fontSize={35}/>
                                <SystemQRcodeOutline fontSize={35}/>
                                <BankcardOutline fontSize={35}/>
                                <UserContactOutline fontSize={35}/>
                            </Space>
                        </div>
                        <div className={"text"}>
                            <span>扫一扫</span>
                            <span>付款码</span>
                            <span>红包/卡券</span>
                            <span>通讯录</span>
                        </div>
                    </div>
                    <div className={'choose'}>
                        <div className={"picture"}>
                            <div onClick={
                                event => {
                                    alert("要跳转的页面还没写a")
                                }
                            }>
                                <img src={require("../图片/小图标/外卖.png").default} alt={""} style={{ borderRadius: 5 }}
                                />
                            </div>
                            <div onClick={
                                event => {
                                    alert("要跳转的页面还没写a")
                                }
                            }>
                                <img
                                    src={require("../图片/小图标/美食.png").default} alt={""} style={{ borderRadius: 5 }}
                                />
                            </div>
                            <div  onClick={
                                event => {
                                    alert("要跳转的页面还没写a")
                                }
                            }>
                                <img
                                    src={require("../图片/小图标/酒店.png").default} alt={""} style={{ borderRadius: 5 }}
                                />
                            </div>
                            <div  onClick={
                                event => {
                                    alert("要跳转的页面还没写a")
                                }
                            }>
                                <img
                                    src={require("../图片/小图标/吃喝玩乐.png").default} alt={""} style={{ borderRadius: 5 }}
                                />
                            </div>
                            <div>
                                <div onClick={
                                    event => {
                                        alert("要跳转的页面还没写a")
                                    }
                                }>
                                    <img src={require("../图片/小图标/电影.png").default} alt={""} style={{ borderRadius: 5 }}
                                    />
                                </div>
                            </div>
                        </div>
                        <div className={"text"}>
                            <span>外卖</span>
                            <span>美食</span>
                            <span>酒店/民宿</span>
                            <span>休闲/玩乐</span>
                            <span>电影/赛事</span>
                        </div>
                        <div className={"picture"}>
                            <div onClick={
                                event => {
                                    alert("要跳转的页面还没写a")
                                }
                            }>
                                <img src={require("../图片/小图标/打车.png").default} alt={""} style={{ borderRadius: 5 }}
                                />
                            </div>
                            <div onClick={
                                event => {
                                    alert("要跳转的页面还没写a")
                                }
                            }>
                                <img
                                    src={require("../图片/小图标/鲜花.png").default} alt={""} style={{ borderRadius: 5 }}
                                />
                            </div>
                            <div  onClick={
                                event => {
                                    alert("要跳转的页面还没写a")
                                }
                            }>
                                <img
                                    src={require("../图片/小图标/超市.png").default} alt={""} style={{ borderRadius: 5 }}
                                />
                            </div>
                            <div  onClick={
                                event => {
                                    alert("要跳转的页面还没写a")
                                }
                            }>
                                <img
                                    src={require("../图片/小图标/药品.png").default} alt={""} style={{ borderRadius: 5 }}
                                />
                            </div>
                            <div  onClick={
                                event => {
                                    alert("要跳转的页面还没写a")
                                }
                            }>
                                <img
                                    src={require("../图片/小图标/机票.png").default} alt={""} style={{ borderRadius: 5 }}
                                />
                            </div>
                        </div>
                        <div className={"text"}>
                            <span>打车</span>
                            <span>浪漫玫瑰</span>
                            <span>超市/便利店</span>
                            <span>买药</span>
                            <span>火车票/机票</span>
                        </div>
                    </div>
                    <div className={"middle"}>
                        <Swiper autoplay loop className={"lunbotu"}>{this.items}</Swiper>
                    </div>
                    <div className={"list"}>
                        <List>
                            {this.users.map((user,index) => (
                                <List.Item
                                    key={user.name}
                                    prefix={
                                        <Image
                                            src={require("../图片/"+ (index+1)+".jpg").default}
                                            alt={""}
                                            style={{ borderRadius: 6}}
                                            fit='cover'
                                            width={60}
                                            height={60}
                                        />
                                    }
                                    description={user.description}
                                >
                                    {user.name}
                                </List.Item>
                            ))}
                        </List>
                    </div>
                </div>
                <Bottom history={this.props.history}/>
            </div>
        );
    }
}
export default App